<template>
    <div class="clear" style="height:10vh">
        <div class="logo">
            <img src="../../assets/logo.png" alt="">
        </div>
        <el-menu style="width:60rem ; float:left" router :default-active="this.$route.path" class="el-menu-demo"
            mode="horizontal" background-color="rgba(40, 58, 90, 0)" text-color="#fff" active-text-color="#ffd04b">
            <el-menu-item index="/carHome/carMain">主页</el-menu-item>
            <el-menu-item index="/carHome/carInfo">个人信息</el-menu-item>
            <el-menu-item index="/carHome/userPinjia">评价</el-menu-item>
            <el-menu-item index="/carHome/carOrder">订单</el-menu-item>
            <el-menu-item index="/carHome/carNews">消息
                <!-- 消息数量根据未读消息的数量改变 -->
                <el-badge :value="this.newsCount" :max="99" :hidden='this.isShow' class="item">
                </el-badge>
            </el-menu-item>
            <el-menu-item index="/carHome/changePwd">修改密码</el-menu-item>
        </el-menu>
        <div class="head_date">
            <span>{{this.nowTime}}</span>
            <!-- <span @click="changecolor" :class="{isblack:black}" class=" iconfont icon-iconset0454 niuniu"></span>
            <span @click="changecolor" :class="{iswhite:white}" class=" iconfont icon-taiyang-copy niuniu"></span> -->
        </div>
        <div class="right">
            <span>亲爱的{{user.user_name}}，您好！</span>
            <el-button type="goon" @click="tuichu">退出</el-button>
        </div>
    </div>
</template>

<script>
    import {
        mymixin
    } from '../../utils/mymixin'
    export default {
        mixins: [mymixin],
        data() {
            return {
                user:'',
                menu:''
            }
        },
        created() {

            this.user = this.$store.state.msgCount.user
            this.menu = this.user.menu
        },
    }
</script>
<style>
    @import url('../../assets/font/icon/iconfont.css');
</style>
<style lang="less" scoped>
    /* .el-menu-item.is-active{
    background-color: red !important;
} */

    /* .isblack{
        color: red;
    }
    .iswhite{
        color: green;
    } */
    .logo {
        width: 15rem;
        float: left;
        height: 4rem;
        padding: 0.5rem;
        line-height: 5rem;
    }
    .el-menu{
        border-bottom: 0!important;
    }

    img {
        height: 4rem;
    }

    .niuniu {
        display: inline-block;
        padding: .2rem;
        margin-left: 1rem;
    }

    .niuniu:hover {
        color: #FFD04B;
    }

    .el-menu-item {
        font-size: 1.6rem;
    }

    .el-menu-item:hover {
        background-color: rgb(64, 94, 145) !important;
    }

    .head_date {
        float: left;
        font-size: 1.4rem;
        width: 25rem;
        height: 5rem;
        line-height: 5rem;
        color: aliceblue;
    }

    .right {
        float: right;
        width: 25rem;
        height: 5rem;
        line-height: 5rem;
    }

    .right>span {
        font-size: 1.6rem;
        margin-right: 2rem;
        color: aliceblue;
    }

    /* 重置按钮 */
    .el-button--goon:hover {
        color: #CAAD69;
        background-color: #ffedc0;
        border-color: #CAAD69;
    }

    .el-button--goon {
        height: 3rem;
        padding: 0.7rem;
        font-size: 1.2rem;
        color: #ffedc0;
        background-color: #CAAD69;
        border-color: #CAAD69;
    }
</style>